<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";

// 定义表单数据类型
interface PhoneForm {
  phone: string;
  code: string;
}

// 定义props
defineProps<{
  loading: boolean;
}>();

// 定义emits
const emit = defineEmits<{
  (e: "login", formData: PhoneForm): void;
  (e: "getCode", phone: string): void;
}>();

// 表单引用
const formRef = ref<FormInstance | null>(null);

// 表单数据
const form = reactive<PhoneForm>({
  phone: "",
  code: "",
});

// 状态管理
const countdown = ref<number>(0);

// 验证规则
const rules: FormRules = {
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
    {
      pattern: /^\d{6}$/,
      message: "请输入6位数字验证码",
      trigger: "blur",
    },
  ],
};

// 获取验证码
const handleGetCode = async () => {
  if (!formRef.value) return;

  try {
    // 验证手机号
    await formRef.value.validateField("phone");

    // 触发获取验证码事件
    emit("getCode", form.phone);

    // 开始倒计时
    countdown.value = 60;
    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);

    ElMessage.success("验证码已发送，请注意查收");
  } catch (error) {
    console.log("手机号验证失败", error);
  }
};

// 处理登录
const handleLogin = async () => {
  if (!formRef.value) return;

  try {
    // 表单验证
    await formRef.value.validate();
    // 触发登录事件
    emit("login", { ...form });
  } catch (error) {
    console.log("表单验证失败", error);
  }
};

// 暴露清除验证方法
const clearValidate = () => {
  formRef.value?.clearValidate();
};

defineExpose({
  clearValidate,
});
</script>

<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    class="login-form"
    autocomplete="off"
  >
    <el-form-item prop="phone">
      <el-input
        v-model="form.phone"
        placeholder="请输入手机号"
        prefix-icon="Phone"
        clearable
      />
    </el-form-item>

    <el-form-item prop="code">
      <el-input
        v-model="form.code"
        placeholder="请输入验证码"
        prefix-icon="Message"
        clearable
      >
        <template #append>
          <el-button
            link
            class="get-code-btn"
            :disabled="countdown > 0"
            @click="handleGetCode"
          >
            {{ countdown > 0 ? `${countdown}s后重新获取` : "获取验证码" }}
          </el-button>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item>
      <el-button
        type="primary"
        class="login-btn"
        :loading="loading"
        @click="handleLogin"
      >
        登录
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
@use "../styles/variables.scss" as vars;

.login-form {
  margin-top: 20px;
  .el-form-item {
    margin-bottom: 20px;
    .el-input {
      height: vars.$input-height;
      .el-input__wrapper {
        border-radius: vars.$radius;
      }
    }
  }
  .login-btn {
    width: 100%;
    height: vars.$btn-height;
    font-size: 16px;
    border-radius: vars.$radius;
  }
  .get-code-btn {
    color: vars.$primary-color;
    padding: 0 15px;
  }
}
</style>
